<template>
  <div class="MyDownload">
    <div class="list-inner">
      <el-card class="box-card">
        <div slot="header" style="text-align:left;">
          <span class="card-title">我的下载/{{count}}张</span>
        </div>
        <el-table
          border
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%;"
          id="out-table"
        >
          <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="id" label="ID" width="60" align="center"></el-table-column>
          <el-table-column prop="img_name" label="名称" header-align="center"></el-table-column>
          <el-table-column prop="describe" label="描述" header-align="center"></el-table-column>
          <el-table-column align="center" prop="category" label="分类" width="80"></el-table-column>
          <el-table-column
            :key="Math.random()"
            align="center"
            prop="img_designer"
            label="图片作者"
            show-overflow-tooltip
          ></el-table-column>

        
          <el-table-column
            min-width="120"
            prop="img_thumbnail"
            label="缩略图"
            align="center"
          >
            <template slot-scope="scope">
              <el-popover placement="right" trigger="click">
                <el-image :src="scope.row.img_thumbnail|fillImgShot" fit="contain"></el-image>
                <el-button slot="reference" style="padding:0;margin:0;border-radio:0;border:none;">
                  <el-image
                    :src="scope.row.img_thumbnail | fillImgShot"
                    fit="cover"
                    style="width:150px;height:100px;border:none;"
                  ></el-image>
                </el-button>
              </el-popover>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="is_enable"
            label="操作"
            width="80"
            column-key="is_enable"
            align="center"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="editPicture(scope.row)">编辑</el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <div class="block" style="margin-top:15px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 15, 20, 25, 30]"
            :page-size="pagesize"
            :pager-count="7"
            layout="sizes, prev, pager, next,jumper, ->,total"
            :total="count"
          ></el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  name: "HeaderSearch",
  data() {
    return {
      count:0,
      page: 1,
      pagesize: 15,
      tableData: [],
    };
  },
  mounted() {
     if (window.sessionStorage.getItem("tuyibo_userid") !== null) {
      var data = JSON.parse(window.sessionStorage.getItem("tuyibo_userid"));
      this.userid = data.userid;
      this.load(this.userid);
    }
  },
  methods: {
    load(userid) {
      let page = this.page;
      let pagesize = this.pagesize;
      this.$axios
        .post("/api/web/getDownloadByUid", {
          userid,
          page,
          pagesize
        })
        .then(res => {
          this.showLoading = false;
          this.count = res.data.count;
          this.tableData=res.data.rows;
          this.flag = true;
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleCurrentChange(val) {
      this.page = val;
      this.load(this.userid);
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.load(this.userid);
    },
  }
};
</script>
<style scoped lang="less">
.MyDownload {
  position: relative;
  padding-top: 24px;
  height: 800px;
  .list-inner {
    padding: 0 16px;
    position: relative;
  }
}
.el-table td div {
  width: 100%;
}

.el-table .status {
  white-space: normal;
  text-align: center;
}

.el-table .cell {
  white-space: normal !important;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>